<template>
  <div class="home-page">
    <div class="bg-[#fff] px-[24px] py-[16px] sticky top-0 z-10">
      <div class="top-container">
        <div class="search-input-wrapper">
          <svg
            class="search-icon"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path
              d="M21 21L16.514 16.506L21 21ZM19 10.5C19 15.194 15.194 19 10.5 19C5.806 19 2 15.194 2 10.5C2 5.806 5.806 2 10.5 2C15.194 2 19 5.806 19 10.5Z"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round" />
          </svg>
          <input
            type="text"
            v-model="search_text"
            @input="debouncedSearch"
            placeholder="What are you looking for?"
            class="search-input" />
          <!-- 清空搜索按钮 -->
          <button v-if="search_text" @click="clearSearch" class="clear-search-btn" type="button">
            <svg
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <path
                d="M18 6L6 18M6 6L18 18"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round" />
            </svg>
          </button>
          <!-- 搜索加载状态 -->
          <div v-if="searchLoading" class="search-loading">
            <svg
              class="animate-spin"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <circle
                cx="12"
                cy="12"
                r="10"
                stroke="currentColor"
                stroke-width="4"
                stroke-dasharray="31.416"
                stroke-dashoffset="31.416">
                <animate
                  attributeName="stroke-dasharray"
                  dur="2s"
                  values="0 31.416;15.708 15.708;0 31.416"
                  repeatCount="indefinite" />
                <animate
                  attributeName="stroke-dashoffset"
                  dur="2s"
                  values="0;-15.708;-31.416"
                  repeatCount="indefinite" />
              </circle>
            </svg>
          </div>
        </div>
        <div class="get-started-btn" v-if="!userInfo" @click="onLoginClick">Log in / Sign up</div>
      </div>

      <!-- 产品标题区域 -->
      <div v-if="!isShowSearchList" class="mt-[16px] flex justify-between items-start gap-[8px]">
        <div class="flex flex-wrap gap-2">
          <div
            class="flex items-center gap-[8px] cursor-pointer rounded-[6px] px-[24px] py-[12px] hover:bg-[#ededed] transition-all duration-200"
            :class="[
              activeTab === item.id
                ? 'bg-[#FBE6DB] text-[#F76B1B] border-[1px] border-[#F76B1B] hover:bg-[#FBE6DB]'
                : 'bg-[#F8F8F8] text-[#0A0A0A] border-[1px] border-[transparent]',
            ]"
            v-for="item in tabList"
            :key="item.id"
            @click="handleTabChange(item.id)">
            <IconRenderer
              v-if="item.icon"
              :name="item.icon"
              :color="activeTab === item.id ? '#F76B1B' : '#0A0A0A'"
              :size="24" />
            <span class="text-[15px] font-[500]">{{ item.name }}</span>
          </div>
        </div>

        <div class=" ">
          <el-popover placement="top-start" trigger="click" width="200px">
            <template #reference>
              <div
                class="flex items-center gap-[8px] px-[24px] py-[12px] text-[#0A0A0A] cursor-pointer text-[16px] rounded-[8px] bg-[#F8F8F8] hover:bg-[#ededed]">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none">
                  <path
                    d="M2 4.5H22"
                    stroke="#222222"
                    stroke-linecap="round"
                    stroke-linejoin="round" />
                  <path
                    d="M5 9.5L19 9.5"
                    stroke="#222222"
                    stroke-linecap="round"
                    stroke-linejoin="round" />
                  <path
                    d="M7 14.5L17 14.5"
                    stroke="#222222"
                    stroke-linecap="round"
                    stroke-linejoin="round" />
                  <path
                    d="M9 19.5L15 19.5"
                    stroke="#222222"
                    stroke-linecap="round"
                    stroke-linejoin="round" />
                </svg>
                <span class="text-[16px] font-[500] text-[#0A0A0A]">Filter</span>
              </div>
            </template>
            <div class="p-[16px] gap-[16px] flex flex-col text-[16px] text-[#0A0A0A]">
              <div
                class="flex items-center justify-between cursor-pointer"
                @click="sortTypeChange('latest')">
                <span
                  :class="{ 'text-[#F76B1B]': sort_type === 'latest' }"
                  class="hover:font-[500]">
                  Latest
                </span>
                <el-icon color="#F76B1B" v-if="sort_type === 'latest'">
                  <Select />
                </el-icon>
              </div>
              <div
                class="flex items-center justify-between cursor-pointer"
                @click="sortTypeChange('likes')">
                <span :class="{ 'text-[#F76B1B]': sort_type === 'likes' }" class="hover:font-[500]">
                  Most Likes
                </span>
                <el-icon color="#F76B1B" v-if="sort_type === 'likes'"><Select /></el-icon>
              </div>
              <div
                class="flex items-center justify-between cursor-pointer"
                @click="sortTypeChange('comments')">
                <span
                  :class="{ 'text-[#F76B1B]': sort_type === 'comments' }"
                  class="hover:font-[500]">
                  Most Comments
                </span>
                <el-icon color="#F76B1B" v-if="sort_type === 'comments'">
                  <Select />
                </el-icon>
              </div>
            </div>
          </el-popover>
        </div>
      </div>
    </div>

    <Banner v-if="!isShowSearchList" />
    <div
      v-if="!isShowSearchList"
      class="flex items-center gap-[8px] text-[20px] font-[600] px-[24px] mb-[-16px]">
      <span style="font-family: 'Inter Tight'" class="text-[#F76B1B]">Community</span>
      <span style="font-family: 'Inter Tight'" class="text-[#222]">Post</span>
    </div>
    <div class="show_search_tips mt-[16px]" v-if="isShowSearchList">
      <span class="search_text_color">"{{ search_text?.trim() }}"</span>
      search results
    </div>
    <Product
      :products="products"
      :loading="loading"
      :loadMoreLoading="loadMoreLoading"
      :hasMore="userInfo ? hasMore : true" />

    <!-- 显示登录按钮 -->
    <div v-if="!userInfo" class="flex justify-center pb-[80px]">
      <div
        @click="onLoginDialogOpen"
        class="cursor-pointer bg-[#F76B1B] text-[#fff] px-[24px] py-[10px] rounded-[32px] font-[500]">
        Sign up to continue
      </div>
    </div>

    <FloatActions />
  </div>
</template>

<script setup lang="ts">
  import Banner from '@/views/home/components/banner.vue';
  import Product from '@/views/home/components/product.vue';
  import IconRenderer from '@/components/icons/IconRenderer.vue';
  import {
    onMounted,
    ref,
    onUnmounted,
    computed,
    onActivated,
    onDeactivated,
    nextTick,
    watch,
  } from 'vue';
  import { FeedsAPI, type FeedItem, type FeedsParams } from '@/api/feeds';
  import request from '@/utils/request';
  import { useRetryEventBus } from '@/utils/retryEventBus';
  import { useRouter, useRoute, onBeforeRouteLeave } from 'vue-router';
  import { useUserStore } from '@/store/user';
  import { useLoginModal } from '@/composables/useLoginModal';
  import { bus, useBus } from '@/utils/bus';
  import { Select } from '@element-plus/icons-vue';
  const userStore = useUserStore();
  const router = useRouter();
  const route = useRoute();

  // 定义组件名称，用于keep-alive缓存
  defineOptions({
    name: 'HomePage',
  });

  const userInfo = computed(() => userStore.user);
  const isLoggedIn = computed(() => userStore.isAuthenticated);

  // Tab相关数据
  const activeTab = ref(1);
  // 分页相关数据
  const start = ref(0);
  const loading = ref(false);
  // 产品数据
  const products = ref<FeedItem[]>([]);
  const sort_type = ref<'latest' | 'likes' | 'comments'>('latest');
  const search_text = ref('');
  const isShowSearchList = ref<boolean>(false); // 展示搜索结果
  const searchLoading = ref(false);
  const searchTimeout = ref<number | any>(null);

  // 触底加载相关
  const loadMoreLoading = ref(false);
  const hasMore = ref(true);
  const scrollTimeout = ref<number | any>(null);

  // 缓存控制
  const isDataLoaded = ref(false);
  const isActivated = ref(false);
  const isFirstMount = ref(true);
  const isReturningFromOtherPage = ref(false);
  const savedScrollPosition = ref(0);

  // 发布作品相关
  const publishedFeedId = ref<string | null>(null);

  // Tab列表数据
  const tabList = ref([
    {
      id: 1,
      name: 'For you',
      icon: 'star',
      component: 'ForYou',
    },
    {
      id: 2,
      name: 'Following',
      icon: 'trending',
      component: 'Trending',
    },
    {
      id: 3,
      name: 'Contest',
      icon: 'new',
      component: 'New',
    },
    // {
    //   id: 4,
    //   name: 'Popular',

    //   component: 'Popular',
    // },
    // {
    //   id: 5,
    //   name: 'Design',
    //   component: 'Design',
    // },
    // {
    //   id: 6,
    //   name: 'Art',
    //   component: 'Art',
    // },
    // {
    //   id: 7,
    //   name: 'Photography',
    //   component: 'Photography',
    // },
    // {
    //   id: 8,
    //   name: 'Fashion',
    //   component: 'Fashion',
    // },
  ]);

  // 更新评论数量
  const refreshCommentNum = (data: any) => {
    products.value.forEach((item: FeedItem) => {
      if (item?.feed_id === data.feed_id) {
        item.counter.comment_count = data.total_comment;
      }
    });
  };
  bus.on('detail:comment', refreshCommentNum);

  // Tab切换处理
  const handleTabChange = (tabId: number) => {
    console.log('Tab切换:', tabId);
    activeTab.value = tabId;
    start.value = 0; // 切换tab时重置到第一页
    products.value = [];
    // 清除缓存，强制刷新
    isDataLoaded.value = false;
    loadProducts(false, true);
  };

  const sortTypeChange = (type: 'latest' | 'likes' | 'comments') => {
    sort_type.value = type;
    start.value = 0; // 切换tab时重置到第一页
    products.value = [];
    // 清除缓存，强制刷新
    isDataLoaded.value = false;
    loadProducts(false, true);
  };

  // 全局悬浮操作 - 登录按钮点击
  const onLoginClick = () => {
    router.push('/login');
  };

  // 打开登录弹窗
  const onLoginDialogOpen = () => {
    const { showModal } = useLoginModal();
    showModal();
  };

  // 防抖搜索功能
  const debouncedSearch = () => {
    if (!isLoggedIn.value || !userInfo.value) {
      search_text.value = '';
      isShowSearchList.value = false;
      onLoginDialogOpen();
      return;
    }
    if (searchTimeout.value) {
      clearTimeout(searchTimeout.value);
    }

    searchTimeout.value = setTimeout(() => {
      isShowSearchList.value = search_text.value.length > 0;
      if (search_text.value.trim()) {
        searchLoading.value = true;
        start.value = 0; // 搜索时重置到第一页
        products.value = [];
        // 清除缓存，强制刷新
        isDataLoaded.value = false;
        loadProducts(false, true);
      } else {
        // 如果搜索框为空，重新加载默认数据
        start.value = 0;
        // 清除缓存，强制刷新
        isDataLoaded.value = false;
        loadProducts(false, true);
      }
    }, 500); // 500ms 防抖延迟
  };

  // 清空搜索
  const clearSearch = () => {
    search_text.value = '';
    start.value = 0;
    products.value = [];
    // 清除缓存，强制刷新
    isDataLoaded.value = false;
    isShowSearchList.value = false;
    loadProducts(false, true);
  };

  // 检查是否已加载数据
  const hasData = () => {
    return isDataLoaded.value && products.value.length > 0;
  };

  // 保存滚动位置
  const saveScrollPosition = () => {
    // 使用nextTick确保DOM更新完成后再保存
    nextTick(() => {
      savedScrollPosition.value = window.pageYOffset || document.documentElement.scrollTop;
    });
  };

  // 恢复滚动位置（无动画）
  const restoreScrollPosition = () => {
    if (savedScrollPosition.value > 0) {
      // 使用nextTick确保DOM渲染完成后再恢复
      nextTick(() => {
        // 使用scrollTo的behavior: 'instant'来避免滚动动画
        window.scrollTo({
          top: savedScrollPosition.value,
          left: 0,
          behavior: 'instant',
        });
        console.log('恢复滚动位置:', savedScrollPosition.value);
      });
    }
  };

  // 获取产品数据
  const loadProducts = async (isLoadMore = false, forceRefresh = false) => {
    // 如果是加载更多，直接执行
    if (isLoadMore) {
      await fetchProducts(isLoadMore);
      return;
    }

    // 检查是否已有数据且不需要强制刷新
    if (!forceRefresh && hasData()) {
      console.log('使用缓存数据，跳过接口调用');
      return;
    }

    await fetchProducts(isLoadMore);
  };

  // 实际的数据获取函数
  const fetchProducts = async (isLoadMore = false) => {
    try {
      if (isLoadMore) {
        loadMoreLoading.value = true;
      } else {
        loading.value = true;
      }

      // 如果有发布的作品ID，先获取该作品数据
      if (!isLoadMore && publishedFeedId.value) {
        console.log('检测到发布作品ID，优先获取该作品数据:', publishedFeedId.value);
        await fetchPublishedFeed();
        // 清除已处理的feed_id
        publishedFeedId.value = null;
      }

      const params: FeedsParams = {
        start: start.value,
        size: 10,
        category_id: activeTab.value,
        sort_type: sort_type.value,
        search_text: search_text.value.trim() || undefined,
      };

      // 未登录用户限制数据量，不启用分页
      if (!isLoggedIn.value || !userInfo.value) {
        params.size = 30; // 未登录用户只加载20条数据
        console.log('未登录用户，限制数据量:', params.size);
      }

      // 根据是否登录选择不同的API
      let apiUrl = '/feeds/homepage';
      if (isShowSearchList.value) {
        apiUrl = '/feeds/search';
      } else if (isLoggedIn.value && userInfo.value) {
        apiUrl = '/feeds/feature';
        console.log('用户已登录，使用正式数据接口:', apiUrl);
      } else {
        console.log('用户未登录，使用首页数据接口:', apiUrl);
      }

      const response = await request.post(apiUrl, params);

      if (response.code == 200 && response.data.feeds && response.data.feeds.length > 0) {
        products.value = [...products.value, ...response.data.feeds];
      }

      // if (isLoadMore) {
      //   // 追加数据
      //   products.value = [...products.value, ...response.data.feeds];
      // } else {
      //   // 替换数据
      //   products.value = response.data.feeds;
      // }

      start.value = response.data.next_start;

      // 检查是否还有更多数据
      // 未登录用户禁用分页
      if (!isLoggedIn.value || !userInfo.value) {
        hasMore.value = false; // 未登录用户禁用分页
        console.log('未登录用户，禁用分页功能');
      } else {
        hasMore.value = response.data.has_more;
      }

      // 更新数据加载状态
      isDataLoaded.value = true;

      console.log('加载产品数据成功:', response);
    } catch (error) {
      console.error('加载产品数据失败:', error);
    } finally {
      loading.value = false;
      searchLoading.value = false;
      loadMoreLoading.value = false;
    }
  };

  // 触底加载更多数据
  const loadMore = async () => {
    if (loadMoreLoading.value || !hasMore.value || loading.value) return;
    // 只有登录用户才能触底加载更多
    if (!isLoggedIn.value || !userInfo.value) {
      console.log('未登录用户，禁用触底加载');
      return;
    }

    // 更新start值以获取下一页数据
    start.value = products.value.length;

    await loadProducts(true);
  };

  // 监听用户登录状态变化
  watch(isLoggedIn, (newValue, oldValue) => {
    console.log('用户登录状态变化:', { newValue, oldValue });

    // 当登录状态发生变化时，重置数据并重新加载
    if (newValue !== oldValue) {
      console.log('登录状态变化，重新加载数据');
      start.value = 0;
      products.value = [];
      isDataLoaded.value = false;
      loadProducts(false, true);
    }
  });

  // 监听路由参数变化，获取feed_id
  watch(
    () => route.query.feed_id,
    (newFeedId) => {
      console.log('检测到feed_id参数变化:', newFeedId);
      if (newFeedId && typeof newFeedId === 'string') {
        publishedFeedId.value = newFeedId;
        console.log('设置发布作品ID:', newFeedId);
        // 只在首页清除URL参数，避免刷新页面时重复处理
        if (route.name === 'HomePage') {
        }
      }
    },
    { immediate: true }
  );

  // 滚动监听函数（节流处理）
  const handleScroll = () => {
    if (scrollTimeout.value) {
      clearTimeout(scrollTimeout.value);
    }

    scrollTimeout.value = setTimeout(() => {
      // 如果组件刚激活，延迟处理滚动事件
      if (!isActivated.value) {
        return;
      }

      // 如果是从其他页面返回，禁用滚动加载
      if (isReturningFromOtherPage.value) {
        console.log('从其他页面返回，禁用滚动加载');
        return;
      }

      // 未登录用户禁用触底加载
      if (!isLoggedIn.value || !userInfo.value) {
        console.log('未登录用户，禁用滚动触底加载');
        return;
      }

      // 如果正在加载或没有更多数据，则不处理滚动
      if (loadMoreLoading.value || !hasMore.value) {
        return;
      }

      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      const windowHeight = window.innerHeight;
      const documentHeight = document.documentElement.scrollHeight;

      // 当滚动到距离底部300px时触发加载
      if (scrollTop + windowHeight >= documentHeight - 300) {
        loadMore();
      }
    }, 100); // 100ms节流
  };

  // 重试事件处理
  // const { on } = useRetryEventBus();

  // // 监听重试成功事件
  // on('request_retry_success', (event: any) => {
  //   console.log('收到重试成功事件:', event);

  //   // 检查是否是feeds相关的请求
  //   if (event.url && event.url.includes('/feeds/feature')) {
  //     console.log('检测到feeds请求重试成功，重新加载数据');
  //     products.value = [];
  //     // 重新调用loadProducts来更新数据
  //     loadProducts();
  //   }
  // });

  // 路由离开前保存滚动位置
  onBeforeRouteLeave((to: any, from: any, next: any) => {
    console.log('路由离开前保存滚动位置');
    saveScrollPosition();
    next();
  });

  // 获取发布的作品数据并放在瀑布流第一位
  const fetchPublishedFeed = async () => {
    if (!publishedFeedId.value) return;

    try {
      const response = await FeedsAPI.getFeed({
        feed_id: publishedFeedId.value,
      });

      if (response.code === 200 && response.data) {
        const publishedFeed = response.data;
        console.log('成功获取发布作品===:', publishedFeed);

        // 将发布的作品放在瀑布流第一位
        products.value = [publishedFeed, ...products.value];
      } else {
        console.warn('获取发布作品失败或数据为空:', response);
      }
    } catch (error) {
      console.error('获取发布作品数据失败:', error);
    }
  };

  // 处理如果是发布流程过来，则需要在第一个显示她的作品
  // 支持动态feed_id参数
  const handleAddFeed = async (feedId?: string) => {
    const targetFeedId = feedId || publishedFeedId.value || '7387017478238416896';

    if (!targetFeedId) {
      console.warn('没有提供feed_id参数');
      return;
    }

    try {
      console.log('handleAddFeed - 获取作品数据:', targetFeedId);
      const response = await FeedsAPI.getFeed({
        feed_id: targetFeedId,
      });

      if (response.code === 200 && response.data.feeds && response.data.feeds.length > 0) {
        const feedData = response.data.feeds[0];
        console.log('handleAddFeed - 成功获取作品:', feedData);

        // 将作品放在瀑布流第一位
        products.value = [feedData, ...products.value];
        console.log('handleAddFeed - 作品已添加到瀑布流第一位');
      } else {
        console.warn('handleAddFeed - 获取作品失败或数据为空:', response);
      }
    } catch (error) {
      console.error('handleAddFeed - 获取作品数据失败:', error);
    }
  };

  // 组件挂载时加载数据
  onMounted(() => {
    console.log('组件挂载');

    // 设置激活状态
    isActivated.value = true;
    // 首次加载数据
    loadProducts();
    // 标记首次挂载完成
    isFirstMount.value = false;

    window.addEventListener('scroll', handleScroll);
  });

  // 组件被激活时（从缓存中恢复）
  onActivated(() => {
    console.log('首页组件被激活');

    // 如果是首次挂载，跳过处理（onMounted已经处理了）
    if (!isFirstMount.value) {
      console.log('首次挂载，跳过onActivated处理');
      return;
    }

    // 重新添加滚动监听
    window.addEventListener('scroll', handleScroll);

    // 延迟恢复滚动位置，确保DOM完全渲染
    setTimeout(() => {
      restoreScrollPosition();
    }, 100); // 100ms延迟

    // 延迟激活滚动处理，避免立即触发
    setTimeout(() => {
      isActivated.value = true;
    }, 500); // 500ms延迟

    // 延迟重置返回标志，允许正常滚动加载
    setTimeout(() => {
      isReturningFromOtherPage.value = false;
      console.log('重置返回标志，允许正常滚动加载');
    }, 1000); // 1秒后允许正常滚动加载

    // 检查是否有新的feed_id参数需要处理
    const currentFeedId = route.query.feed_id as string;
    if (currentFeedId && currentFeedId !== publishedFeedId.value) {
      console.log('检测到新的feed_id参数，重新加载数据:', currentFeedId);
      publishedFeedId.value = currentFeedId;
      // 清除URL参数
      router.replace({ query: {} });
      // 重新加载数据
      start.value = 0;
      products.value = [];
      isDataLoaded.value = false;
      loadProducts(false, true);
    } else if (hasData()) {
      console.log('使用缓存数据，跳过接口调用');
    } else {
      console.log('无缓存数据，重新加载');
      loadProducts();
    }
  });

  // 组件被停用时（离开页面）
  onDeactivated(() => {
    console.log('首页组件被停用，离开页面');

    // 标记为从其他页面返回
    isReturningFromOtherPage.value = true;
    console.log('设置返回标志，下次激活时将禁用滚动加载');

    // 移除滚动监听
    window.removeEventListener('scroll', handleScroll);
  });

  // 组件卸载时清理事件监听
  onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
    if (scrollTimeout.value) {
      clearTimeout(scrollTimeout.value);
    }
    if (searchTimeout.value) {
      clearTimeout(searchTimeout.value);
    }
    bus.off('detail:comment', refreshCommentNum);
  });
</script>

<style scoped lang="scss">
  .home-page {
    width: 100%;
    min-height: 100vh;

    background: #f9fafb;
  }

  .top-container {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
  }

  .search-input-wrapper {
    position: relative;
    width: 100%;
  }

  .search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: #9ca3af;
    z-index: 1;
    pointer-events: none;
  }

  .search-input {
    width: 100%;
    height: 48px;
    padding: 12px 16px 12px 48px;
    border: 2px solid #ededed;
    border-radius: 8px;
    font-size: 16px;
    background: #ededed;
    transition: all 0.3s ease;
    outline: none;

    &:focus {
      box-shadow: 0 0 0 3px rgba(245, 245, 245, 1);
    }

    &::placeholder {
      color: #7a7a7a;
    }
  }

  .clear-search-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #9ca3af;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;

    &:hover {
      background: #6b7280;
      transform: translateY(-50%) scale(1.1);
    }
  }

  .search-loading {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    z-index: 2;
  }

  .get-started-btn {
    padding: 12px 24px;
    color: #222;
    border-radius: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-size: 15px;
    &:hover {
      color: #7a7a7a;
    }
  }
  .show_search_tips {
    margin-left: 24px;
    color: var(---9, #222);
    font-family: 'Inter Tight';
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    .search_text_color {
      color: #7a7a7a;
    }
  }
</style>
